import React, { Component } from 'react';
import autoBind from 'react-autobind';
import qs from 'qs';
import { Link, browserHistory } from 'dva/router';
import { TabBar } from 'antd-mobile';

// widget 
import HeadNav from '../Common/HeadNav'
import HomeTop from './HomeTop'
import HomeBody from './HomeBody'
import BuyCar from '../BuyCar'
import Mine from '../Mine'

class HomeTab extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	selectedTab: props.meyley.homeTabType,
		    hidden: false
        }
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.meyley.homeTabType != this.props.meyley.homeTabType) {
        	this.setState({
        		selectedTab: nextProps.meyley.homeTabType
        	})
        }
    }
    componentDidMount() {

    	const { dispatch, location } = this.props
        let searchParm = location.search.replace('?', '')
        searchParm = qs.parse(searchParm)
        
        if(searchParm.homeTabType) {
        	dispatch({
	    		type: 'meyley/changeHomeTabType',
	    		payload: searchParm.homeTabType
	    	})	
        }
        if(window.location.href.indexOf('#payresult') != -1) {
        	browserHistory.push('/payresult' + window.location.hash.replace('#payresult', ''))
        }
    }
    renderContent(pageText) {
    	if(pageText === 'home') {
    		return <div>
    			<HomeTop {...this.props}/>
    			<HomeBody {...this.props} />
    		</div>
    	} else if(pageText === 'buycar') {
    		return <BuyCar {...this.props} />
    	} else if(pageText === 'mine') {
    		return <div className="mine-container">
    			<HeadNav title="我的" noLeftIcon={true} />
    			<Mine {...this.props} />
    		</div>
    	}
	    return (
	      <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
	        <div style={{ paddingTop: 60 }}>你已点击“{pageText}” tab， 当前展示“{pageText}”信息</div>
	        <a style={{ display: 'block', marginTop: 40 }} onClick={(e) => {
	          e.preventDefault();
	          this.setState({
	            hidden: !this.state.hidden,
	          });
	        }}
	        >
	          敬请期待。
	        </a>
	      </div>
	    );
	}
	changeHomeType(type) {
		const { dispatch } = this.props

    	dispatch({
    		type: 'meyley/changeHomeTabType',
    		payload: type
    	})
	}

	render() {
	 	return (
	 		<TabBar
		        unselectedTintColor="#949494"
		        tintColor="#FF004E"
		        barTintColor="white"
		        hidden={this.state.hidden}
		      >
		        <TabBar.Item
		          title="首页"
		          key="首页"
		          icon={require('../../assets/home/tab_home.png')}
		          selectedIcon={require('../../assets/home/tab_home_active.png')}
		          selected={this.state.selectedTab === 'home'}
		          onPress={this.changeHomeType.bind(this, 'home')}
		          data-seed="logId"
		        >
		          {this.renderContent('home')}
		        </TabBar.Item>
		        <TabBar.Item
		          icon={require('../../assets/home/tab_friend.png')}
		          selectedIcon={require('../../assets/home/tab_friend_active.png')}
		          title="好友"
		          key="好友"
		          selected={this.state.selectedTab === 'friend'}
		          onPress={this.changeHomeType.bind(this, 'friend')}
		          data-seed="logId1"
		        >
		          {this.renderContent('好友')}
		        </TabBar.Item>
		        <TabBar.Item
		          icon={require('../../assets/home/tab_meyley.png')}
		          selectedIcon={require('../../assets/home/tab_meyley_active.png')}
		          title="发现·魅"
		          key="发现·魅"
		          selected={this.state.selectedTab === 'meyley'}
		          onPress={this.changeHomeType.bind(this, 'meyley')}
		        >
		          {this.renderContent('发现·魅')}
		        </TabBar.Item>
		        <TabBar.Item
		          icon={require('../../assets/home/tab_carbuy.png')}
		          selectedIcon={require('../../assets/home/tab_carbuy_active.png')}
		          title="宝贝"
		          key="宝贝"
		          selected={this.state.selectedTab === 'goods'}
		          onPress={this.changeHomeType.bind(this, 'goods')}
		        >
		          {this.renderContent('buycar')}
		        </TabBar.Item>
		        <TabBar.Item
		          icon={require('../../assets/home/tab_mine.png')}
		          selectedIcon={require('../../assets/home/tab_mine_active.png')}
		          title="我的"
		          key="我的"
		          selected={this.state.selectedTab === 'mine'}
		          onPress={this.changeHomeType.bind(this, 'mine')}
		        >
		          {this.renderContent('mine')}
		        </TabBar.Item>
		      </TabBar>
	  	);
	}
};

HomeTab.propTypes = {
};

export default HomeTab
